<script setup lang='ts' name="data-tabs">
import { SearchForm } from '@fl/components'
import { ref, toRefs } from 'vue'

import { defaultPdfImg } from './constant'

const props = defineProps<{
    data?: any
}>()

const { data } = toRefs(props)
const activeName = ref('first')

const baseCol: any = [
    {
        colProps: {
            span: 8,
        },
        label: '型号',
        prop: 'productModel',
        valueType: 'text',
    },
    {
        colProps: {
            span: 8,
        },
        label: '计量单位',
        prop: 'productUnit',
        valueType: 'text',
    },
    {
        colProps: {
            span: 8,
        },
        label: '购买条件',
        prop: 'purchaseConditions',
        valueType: 'text',
    },
]

// 产品属性 动态生成
const proptyForm: any = ref({})
const proptyCol: any = computed(() => {
    let target: any = []
    if (data.value?.attributeList?.length) {
        target = data.value.attributeList.map((item: any, index: number) => {
            const prop = `key${index}`
            proptyForm.value[prop] = item.attributeValue
            return {
                colProps: {
                    span: 8,
                },
                label: item.attributeKey,
                labelWidth: 120,
                prop,
                valueType: 'text',
            }
        })
    }
    return target
})

const reportCol: any = [
    {
        colProps: {
            span: 8,
        },
        label: '检测单位',
        prop: 'reportDetectingUnit',
        valueType: 'text',
    },
    {
        colProps: {
            span: 8,
        },
        label: '检测时间',
        prop: 'reportDetectionTime',
        valueType: 'text',
    },
    {
        colProps: {
            span: 24,
        },
        label: '报告图片',
        prop: 'reportImage',
        valueType: 'text',
    },
]
const certificateCol: any = [
    {
        colProps: {
            span: 8,
        },
        label: '证书星级',
        prop: 'certificateStar',
        valueType: 'text',
    },
    {
        colProps: {
            span: 8,
        },
        label: '工厂名称',
        prop: 'certificateFactoryName',
        valueType: 'text',
    },
    {
        colProps: {
            span: 8,
        },
        label: '发证单位',
        prop: 'certificateIssuingAuthority',
        valueType: 'text',
    },
    {
        colProps: {
            span: 8,
        },
        label: '发证日期',
        prop: 'certificateIssuingDate',
        valueType: 'text',
    },
    {
        colProps: {
            span: 8,
        },
        label: '有效期至',
        prop: 'certificateExpireDate',
        valueType: 'text',
    },
    {
        colProps: {
            span: 24,
        },
        label: '证书图片',
        prop: 'certificateImage',
        valueType: 'text',
    },
]

// 报告图片
const reportImg = computed(() => {
    return data.value?.report?.reportImage ? data.value.report.reportImage.split(';') : []
})

// 证书图片
const ctfImgs = computed(() => {
    return data.value?.certificate?.certificateImage ? data.value?.certificate?.certificateImage.split(';') : []
})

function isPdf(url: string) {
    return /\.pdf$/.test(url)
}
</script>

<template>
    <el-tabs v-model="activeName"
             class="demo-tabs"
    >
        <el-tab-pane label="产品详情"
                     name="first"
        >
            <div v-html="data?.productDetail" />
        </el-tab-pane>

        <el-tab-pane label="规格属性"
                     name="second"
        >
            <div class="info-title">
                基本信息
            </div>

            <SearchForm v-model="data"
                        :has-footer="false"
                        :columns="baseCol"
            />

            <div class="info-title">
                产品属性
            </div>

            <SearchForm v-model="proptyForm"
                        :has-footer="false"
                        :columns="proptyCol"
            />
        </el-tab-pane>

        <el-tab-pane label="产品报告"
                     name="third"
        >
            <div class="info-title">
                {{ data?.report?.reportName }}
            </div>

            <SearchForm v-model="data.report"
                        :has-footer="false"
                        :columns="reportCol"
            >
                <template #plus-field-reportImage>
                    <template v-for="(item, index) in reportImg"
                              :key="index"
                    >
                        <!-- pdf展示默认图片 点击新窗口预览 -->
                        <a v-if="isPdf(item)"
                           :href="item"
                           download=""
                           target="_blank"
                           class="mb-10 mr-10 text-16 text-blue-5 font-400 relative w-max cursor-pointer"
                        >
                            <img :src="defaultPdfImg"
                                 class="rounded-4 h-290 w-220 cursor-pointer"
                            >
                        </a>

                        <el-image v-else
                                  class="mb-10 mr-10 mr-20 rounded-4 h-290 w-220 cursor-pointer"
                                  :src="item"
                                  :zoom-rate="1.2"
                                  :max-scale="7"
                                  :min-scale="0.2"
                                  :preview-src-list="reportImg"
                                  :initial-index="4"
                                  fit="cover"
                        />
                    </template>
                </template>
            </SearchForm>
        </el-tab-pane>

        <el-tab-pane label="产品证书"
                     name="fourth"
        >
            <div class="info-title">
                {{ data?.certificate?.certificateName }}
            </div>

            <SearchForm v-model="data.certificate"
                        :has-footer="false"
                        :columns="certificateCol"
            >
                <template #plus-field-certificateImage>
                    <template v-if="ctfImgs.length">
                        <el-image v-for="(item, index) in ctfImgs"
                                  :key="index"
                                  class="mr-20 rounded-4 h-290 w-220 cursor-pointer"
                                  :src="item"
                                  :zoom-rate="1.2"
                                  :max-scale="7"
                                  :min-scale="0.2"
                                  :preview-src-list="ctfImgs"
                                  :initial-index="4"
                                  fit="cover"
                        />
                    </template>
                </template>
            </SearchForm>
        </el-tab-pane>
    </el-tabs>
</template>

<style lang="less" scoped>
.demo-tabs {
    .info-title {
        font-size: 20px;
        font-weight: 600;
        line-height: 60px;
        color: #1d2129;
    }

    :deep(.el-tabs__nav-scroll) {
        .el-tabs__item {
            font-size: 16px;
        }
    }

    :deep(.el-tabs__nav-wrap::after) {
        display: none;
    }

    :deep(.plus-form-item__label) {
        color: #767676;
        font-size: 16px;
    }

    :deep(.el-text--default) {
        font-size: 16px;
        color: #1d2129;
    }
}
</style>
